<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图标定位二三事</title>
    <style>
        body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
        body, h3, h5 { margin: 0; }
        img { border: 0 none; vertical-align: bottom; }
        .l { float: left; }.r { float: right; }
        .constr { width: 1200px; margin-left: auto; margin-right: auto; }
        .header { background-color: #2A2C2E; }
        .nav { height: 60px; }
        .nav-list { float: left; font-size: 14px; font-weight: 400; }
        .nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }
        .nav-a:hover { color: #fff; }

        .course { padding-top: 10px; }
        .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }
        .course-list-img { background-color: #6396F1; }
        .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }
        .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }

        .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); }
        .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }
        .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }
    </style>
</head>

<body>
<div class="header">
    <div class="constr">
        <div class="nav">
            <h3 class="nav-list">
                <a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
            </h3>
            <h3 class="nav-list">
                <a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
            </h3>
            <h3 class="nav-list">
                <a href="http://www.imooc.com/seek/index" class="nav-a">
                    求课<i class="icon-hot"></i>
                </a>
            </h3>
        </div>
    </div>
</div>

<div class="main">
    <div class="constr">
        <div class="course">
            <a href="http://www.imooc.com/view/121" class="course-list">
                <div class="course-list-img">
                    <span class="icon-recom">推荐</span>
                    <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
                    --><i class="icon-vip">vip</i>
                </div>
                <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
                <div class="course-list-tips">
                    <span class="l">已完结</span>
                    <span class="r">3514人学习</span>
                </div>
            </a>
        </div>
    </div>
</div>
</body>
</html>